<template>
	<section class="main_" v-loading="loading">
		<!--工具条-->
		<el-col :span="23" class="main_" >
			<el-form :inline="true" >
				<el-form-item>
					<el-select v-model="search.type" size="small"  placeholder="状态" class="select_" @change="initList">
						<el-option v-for="item in options" :key="item.value" :label="item.label"	:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input size="small" v-model="search.userName" placeholder="姓名" @keyup.enter.native="initList" clearable ></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" @click="initList" >查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<el-table :data="tableData" stripe >
			<el-table-column type="index" width="50"></el-table-column>
      <el-table-column label="头像" >
        <template slot-scope="scope">
          <img :src="scope.row.avatar" class="img_">
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="用户名" ></el-table-column>
      <el-table-column prop="tel" label="电话" ></el-table-column>
      <el-table-column prop="detail" label="备注" show-overflow-tooltip></el-table-column>
      <el-table-column prop="createDate" label="日期" :formatter="formateDate"></el-table-column>
      <el-table-column label="状态" >
        <template slot-scope="scope">
          <span v-if="scope.row.type === 0" class="todo_ blod_">待审核</span>
          <span v-else-if="scope.row.type === 1" class="done_ blod_">已认证</span>
          <span v-else class="refuse_ blod_">已拒绝</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="功能" >
				<template slot-scope="scope">
					<el-dropdown trigger="click" placement="top">
						<el-button :disabled="scope.row.type != 0" size="mini">审核</el-button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item @click.native="adopt(scope.row,1,'')"><span class="done_ blod_">通过</span></el-dropdown-item>
							<el-dropdown-item @click.native="examine(scope.row)"><span class="todo_ blod_">拒绝</span></el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					<el-button type="danger" size="mini" @click="delUser(scope.row._id)">删除</el-button>
				</template>
			</el-table-column>
    </el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[ 10, 20 , 30]"
      :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="page.count">
    </el-pagination>

		<el-dialog title="审核" :visible.sync="examineData.isShow">
			<el-form label-width="80px">
				<el-form-item label="用户名:" >
					<el-input disabled v-model="examineData.row.userName" ></el-input>
				</el-form-item>
				<el-form-item label="理由:">
					<el-input placeholder="请输入拒绝理由" v-model="examineData.msg" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" @click="adopt(examineData.row,2,examineData.msg)" type="primary">确定</el-button>
				<el-button size="mini" @click="examineData.isShow = false">取 消</el-button>
			</div>
		</el-dialog>

	</section>
</template>

<script>
import moment from 'moment'
	export default {
		data() {
			return {
				loading : false ,
				tableData: [],
				options: [{ value: 3, label: '全部' }, { value: 0, label: '待审核' }, { value: 1, label: '已认证' }, { value: 2, label: '已拒绝' }],
				search : { type : 3} ,
				page : { skip : 0 ,limit : 10 ,count : 0},
				examineData : {isShow : false ,row : {} , msg : ''} 
			}
		},
		methods: {
			delUser : function (res ){//删除商家
				this.$confirm('此操作会将商家关联的所有商店也会删除, 是否继续?', '提示', {
          	confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'
				}).then(() => {
					this.loading = true ;
					this.$http.post('/api/admin/delUserById',{_id : res }).then(res => {
						this.loading = false ;
						let result = res.data ;
						if(result.code == 100){
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
						}
						this.initList();
					})
				});
			},
			examine : function (res ){//打开审核面板
				this.examineData.isShow = true ;
				this.examineData.row = res ;
				this.examineData.msg = '';
			},
			adopt : function (res , num ,msg) {//调用审核接口
				this.loading = true ;
				this.examineData.isShow = false ;
				this.$http.post('/api/admin/examine',{data : res , type : num ,msg : msg}).then(res => {
					this.loading = false ;
					let result = res.data ;
					if(result.code == 100){
						this.$message({
							type: "success",
							message: "操作成功~"
						});
					}
					if(result.code == 101){
						this.$message({
							type: "error",
							message: result.errMsg
						});
					}
					this.initList();
				})
			},
			handleCurrentChange: function(res) {
					if (res == 1)
							this.page.skip = 0;
					else
							this.page.skip = (res - 1) * this.page.limit
					this.initList();
			},
			handleSizeChange: function(res) {
					this.page.limit = res;
					this.initList();
			},
			formateDate(res){
				return moment(res.createDate).format('YYYY-MM-DD HH:mm');
			},
      initList : function () {
				this.loading = true ;
        this.$http.post('/api/admin/queryAuthList',{search : this.search , page : this.page }).then(res => {
					this.loading = false ;
          let result = res.data;
          if(result.code == 100 ){
						this.tableData = result.data ;
						this.page.count = result.count ;
          }
        })
      }
		},
		created() {
				this.initList();
		}
	}

</script>

<style scoped lang="scss">
.main_ {
  margin: {
    top: 5px;
    left: 5px;
  }
  .select_ {
    width: 120px;
  }
}
.img_ {
  width: 40px;
  height: 40px;
}
.blod_ {
  font : {
    weight: bold;
    size: 12px;
  }
}
.todo_ {
  color: #f56c6c;
}
.refuse_ {
  color: #e6a23c;
}
.done_ {
  color: #67c23a;
}
</style>